<template>
	<view style="min-height: 100vh;position: relative;background-color: #f2f2f2;">
		<u-navbar title='合同列表' left-icon-color="white" :autoBack="true" :titleStyle="{'color':'white'}"
			bgColor="#13989a" :placeholder="true"></u-navbar>
		<view class="container">
			<view style="margin: 20rpx 0;margin-top: 40rpx;">
				<u-tabs :lineColor='color' :list="tabList" @click="sectionChange" :current="current"  :activeStyle="{
            color: color,
            fontWeight: 'bold',
            transform: 'scale(1.02)'
        }"
        :inactiveStyle="{
           
            transform: 'scale(1)'
        }"></u-tabs>
			<!-- <u-subsection mode="subsection" height="80" activeColor="#13989A" :list="tabList" :current="current" @change="sectionChange"></u-subsection>	 -->
			</view>
			<view class="floor" style="margin-top: 25rpx;"  v-for="(v,i) in infoList" :key="i" v-if="v.contractId">
				<view>
					<view class="title" style="display: flex;justify-content: space-between;align-items: center;">
						<text>{{v.companyType}}</text>
						<view style="font-size: 28rpx;font-weight: 500;">
							<text style="font-size: 28rpx; color: #13989a; border-bottom: 1px solid #13989a;"
								@click.stop="lookSign(v.signedContractAddress||v.contractAddressPdf)">查看合同</text>
						</view>
					</view>
					<view  class="title" style="display: flex;justify-content: space-between;align-items: center;margin-top: 10px;">
						<text>设计图</text>
						<view style="font-size: 28rpx;font-weight: 500;">
							<text style="font-size: 28rpx; color: #13989a; border-bottom: 1px solid #13989a;"
								@click.stop="downSign(v.designUrl,'设计图')">下载</text>
						</view>
					</view>
					<view  class="title" style="display: flex;justify-content: space-between;align-items: center;margin-top: 10px;">
						<text>预算单</text>
						<view style="font-size: 28rpx;font-weight: 500;">
							<text style="font-size: 28rpx; color: #13989a; border-bottom: 1px solid #13989a;"
								@click.stop="downSign(v.preSettlementUrl,'预算单')">下载</text>
						</view>
					</view>
					<view class="title" style="display: flex;justify-content: space-between;align-items: center;margin-top: 10px;margin-bottom: 50rpx;">
						<text style="font-size: 28rpx;font-weight: 500;">合同金额</text>
						<text style="color: #13989a;">￥<text style="margin-left: 10rpx;font-size: 40rpx;font-weight: 700;">{{v.preSettleMoney}}</text></text>
						<!-- <text style="padding: 0 20rpx;">|</text>
						<text style="font-size: 28rpx;">已付金额￥<text style="color: #e45656;">{{'10'}}</text></text> -->
					</view>
					
					<!-- <view style="display: flex;justify-content: space-around;align-items: center;font-size: 28rpx;margin-top: 20rpx;padding: 0 100rpx;">
						<text  class="btn" >签订合同</text>
						<text class="btn" 
							@click.stop="toPay(item)">去支付</text>
					</view> -->
					<view class="bottom flex alignItem" style="justify-content: center;" v-if="loginType==4">
						<view class="bottomleft" style="background-color: #13989a;color: aliceblue;" @click="signContract(v)" v-if="!v.signedContractAddress">
							签订合同
						</view>
						<view class="bottomleft" style="background-color: #13989a;color: aliceblue;" @click="lookSign1(v.signedContractAddress)" v-else >
							电子合同下载
						</view>
						<view class="bottomright" style="background-color: #e45656;color: aliceblue;" @click="toPay(v)" v-if="!v.isPay">
							去支付</view>
							<view class="bottomright" style="background-color: #e45656;color: aliceblue;" @click="toPay(v)" v-else>
							查看订单</view>
					</view>
					<view class="bottom flex alignItem" style="justify-content: center;" v-else>
						<view class="bottomleft" style="background-color: #13989a;color: aliceblue;" @click="lookSign1(v.signedContractAddress)" >
							电子合同下载
						</view>
							<view class="bottomright" style="background-color: #e45656;color: aliceblue;" @click="toPay(v)">
							查看订单</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	let app = getApp();
	export default {
		data() {
			return {
				tabVal:0,
				tabList:[],
				color:app.globalData.defaultColor,
				assignTaskId: 0,
				loginType: uni.getStorageSync('loginType'),
				current: 0,
				color: app.globalData.defaultColor,
				// 1 装修公司 2 冷链公司 3 货架公司 4 监控公司 5 门窗公司 6 广告公司
				list: ['装修', '冷链', '货架', '监控', '门窗', '广告'],
				infoList: [],
				status:null,
			}
		},
		onLoad(option) {
			if (option.assignTaskId) {
				this.assignTaskId=option.assignTaskId
				// this.getContractAddressList()
				// this.getTabList()
			}
			if(option.status){
				this.status=option.status
			}
		},
		onShow() {
			const pages = getCurrentPages();
			  const currentPage = pages[pages.length - 1];
			  const routeParams = currentPage.options;
			  
			  if(routeParams ){
				  if(routeParams.assignTaskId){
					  this.assignTaskId = routeParams.assignTaskId
					  this.getTabList()
				  }
				  if(routeParams.status){
					  this.status= routeParams.status
				  }
			  }
			  
			  console.log("onShow 中的路由参数：", routeParams);
			 
			// this.getTabList()
		},
		methods: {
			getTabList(){
				if(!this.assignTaskId) return
				uni.$u.http.get('/contract/getTypeList',{params:{assignTaskId:this.assignTaskId}}).then(res => {
					console.log('tabList',res);
					if(res && res.length){
						if(!this.tabVal){
							this.tabVal = res[0].typeId
						}
						
						this.getContractAddressList()
						res.forEach(item =>{
							item.name = item.typeName
						})
						this.tabList = res
						
					}
				})
			},
			getContractAddressList() {
				uni.$u.http.get('/assign/getContractAddressList', {
					params: {
						assignTaskId: this.assignTaskId,
						type:this.tabVal
					}
				}).then(res => {
					this.infoList=res
				})
			},
			downSign(url,text){
				if (url) {
					uni.showLoading({
						title: `${text}下载中...`
					})
					console.log('url',url);
					uni.downloadFile({
						url: `https://${url}`,
						success: function(res) {
							var filePath = res.tempFilePath;
							uni.hideLoading();
							
							uni.openDocument({
								filePath: filePath,
								showMenu: true,
								success: function(res) {
									console.log('打开文档成功');
								}
							});
							 // uni.saveFile({
							 //      tempFilePath:filePath,
							 //      success: function (res) {
								// 	  console.log('savedFilePath',res.savedFilePath);
							 //        var savedFilePath = res.savedFilePath;
							 //      }
							 //    });
						},
						fail: (err) => {
							uni.hideLoading();
							console.log('失败',err);
							uni.$u.toast(`${text}下载失败,请联系管理员 :)`);
						}
					});
				} else {
					uni.$u.toast(`${text}未上传`);
				}
			},
			lookSign(url) {
				if (url) {
					uni.showLoading({
						title: '合同下载中...'
					})
					uni.downloadFile({
						url: `https://${url}`,
						success: function(res) {
							var filePath = res.tempFilePath;
							uni.hideLoading();
							uni.openDocument({
								filePath: filePath,
								showMenu: true,
								success: function(res) {
									console.log('打开文档成功');
								}
							});
						},
						fail: () => {
							uni.hideLoading();
							uni.$u.toast('合同下载失败,请联系管理员 :)');
						}
					});
				} else {
					uni.$u.toast('合同未上传');
				}

			},
			lookSign1(url) {
				if (url) {
					uni.showLoading({
						title: '合同下载中...'
					})
					uni.downloadFile({
						url: `https://${url}`,
						success: function(res) {
							var filePath = res.tempFilePath;
							uni.hideLoading();
							uni.openDocument({
								filePath: filePath,
								showMenu: true,
								success: function(res) {
									console.log('打开文档成功');
								}
							});
						},
						fail: () => {
							uni.hideLoading();
							uni.$u.toast('合同下载失败,请联系管理员 :)');
						}
					});
				} else {
					uni.$u.toast('合同尚未签订');
				}
			
			},
			signContract(info) {
				if (!info.imgUrl) {
					return uni.$u.toast('合同未上传');
				}
				uni.navigateTo({
					url: `/pages/contract/index?url=${info.contractAddressPdf}&assignTaskId=${this.assignTaskId}&imgUrl=${info.imgUrl}&type=${info.companyTypeId}&contractId=${info.contractId}`
				})
			},
			toPay(info) {
				if (!info.imgUrl) {
					return uni.$u.toast('合同未上传');
				}
				uni.navigateTo({
					url: `/pages/comfirmPay/index?contractAddressPdf=${info.contractAddressPdf}&signedContractAddress=${info.signedContractAddress}&status=${this.status}&isPay=${info.isPay}&contractId=${info.contractId}&supplierId=${info.supplierTaskId}&supplierType=${this.tabVal}`
				})
			},
			sectionChange(e) {
				
				console.log(e)
				this.current = e.index;
				this.tabVal = e.typeId;
				this.getContractAddressList()
			},
			taskProgress(assignTaskId, brandPartyId) {
				uni.navigateTo({
					url: `/pages/taskAllocation/index?assignTaskId=${assignTaskId}&brandPartyId=${brandPartyId}`
				})
			},
		}
	}
</script>
<style>
	::v-deep.u-subsection__item__text{
		text-align: center!important;
	}
</style>
<style lang="scss" scoped>
	
	.btn {
		width: 160rpx;
		border-radius: 20rpx;
		font-size: 26rpx;
		text-align: center;
		line-height: 65rpx;
		padding: 0rpx 20rpx;
	}

	.container {
		width: 92vw;
		padding: 30rpx;
		padding-top: 0;
		z-index: 10;
		position: absolute;
		top: 160rpx;
		overflow: hidden;
		border-radius: 20rpx;
	}

	.workerSearch {
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		padding-left: 22rpx;
		width: 100%rpx;
		height: 60rpx;
		background-color: #e6e6e6;
		opacity: 0.9;
		margin: 10rpx 0;
	}

	.floor {
		background-color: #fff;
		border-radius: 15rpx;
		padding:30rpx;
		margin-bottom: 20rpx;

		.adress {
			font-size: 26rpx;
		}

		.title {
			font-weight: 500;
			font-size: 30rpx;
		}
	}

	.bottom {
		background-color: white;
		box-sizing: border-box;
		// padding: 20rpx 0;
		min-height: 20rpx;
	}

	.bottomleft {
		width: 50%;
		border-bottom-left-radius: 80rpx;
		border-top-left-radius: 80rpx;
		background-color: #222426;
		color: white;
		font-size: 30rpx;
		text-align: center;
		line-height: 60rpx;
		padding:10rpx 0;
	}

	.bottomright {
		width: 50%;
		border-bottom-right-radius: 80rpx;
		border-top-right-radius: 80rpx;
		background-color: #13989A;
		color: white;
		font-size: 30rpx;
		text-align: center;
		line-height: 60rpx;
		padding:10rpx 0;
	}
</style>